<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no, email=no">
		<meta name="HandheldFriendly" content="true">
		<title>表单form</title>
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_808616_yrbvv5ptdqj.css" />
		<link rel="stylesheet" type="text/css" href="../../css/comment.css" />
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="st-form-warp">
			<div class="st-item">
				<p class="st-item-title">搜索</p>
				<form>
					<div class="st-search-wrp st-border-tb">
						<div class="st-search">
							<label>
								<span class="iconfont icon-sousuo"></span>
							</label>
							<div class="st-input">
								<input type="text" name="" value="" placeholder="搜索内容" />
							</div>
						</div>
						<div class="st-btn-text">搜索</div>
					</div>
				</form>
			</div>

			<div class="st-item">
				<p class="st-item-title">登录/注册</p>
				<form>
					<div class="st-form">
						<ul class="st-list st-border-tb">
							<li class="st-border-b">
								<span class="st-icon-l iconfont icon-shouji1"></span>
								<div class="st-input">
									<input type="text" name="" value="" placeholder="请输入手机号" />
								</div>
								<span class="st-icon-r close iconfont icon-cuowu2"></span>
							</li>
							<li class="st-border-b st-code">
								<span class="st-icon-l iconfont icon-anquan"></span>
								<div class="st-input">
									<input type="text" name="" value="" placeholder="请输入验证码" />
								</div>
								<div class="st-btn-text st-icon-r">请输入验证码</div>
							</li>
							<li class="">
								<span class="st-icon-l iconfont icon-shouji1"></span>
								<div class="st-input">
									<input class="password" type="password" name="" value="" placeholder="请输入新密码" />
								</div>
								<span class="st-icon-r eye iconfont icon-yincang"></span>
							</li>
						</ul>
						<button class="st-btn st-btn-fill">登录/注册</button>
					</div>
				</form>
			</div>

			<div class="st-item">
				<p class="st-item-title">表单列表</p>
				<form>
					<div class="st-form-list">
						<ul class="st-list st-border-tb">
							<li class="st-border-b">
								<label>姓名：</label>
								<div class="st-input">
									<input type="text" name="" value="" placeholder="请输入手机号" />
								</div>
							</li>
							<li class="st-border-b">
								<label>手机号：</label>
								<div class="st-input">
									<input type="text" name="" value="" placeholder="请输入手机号" />
								</div>
							</li>
							<li class="st-border-b st-link">
								<label>所在地区：</label>
								<div class="st-input">
									<input type="text" name="" value="" placeholder="请输入所在地区" />
								</div>
							</li>
							<li class="st-live">
								<label>请输入留言：</label>
								<div class="st-textarea">
									<textarea name="" rows="3" cols="" placeholder="请输入您的留言"></textarea>
								</div>
							</li>
						</ul>
						<button class="st-btn st-btn-fill">确定</button>
					</div>
				</form>
			</div>

			<div class="st-item">
				<p class="st-item-title">表单单选</p>
				<!--<form>-->
					<div class="st-form-list">
						<ul class="st-list st-border-tb">
							<li class="st-border-b">
								<label class="st-radio" for="radio"><input type="radio" name="radio" value="" checked="checked"/></label>
								<p>单选按钮</p>
							</li>
							<li class="st-border-b">
								<label class="st-radio"><input type="radio" name="radio" value="" /></label>
								<p>单选按钮</p>
							</li>
							<li class="st-border-b">
								<label class="st-radio"><input type="radio" name="radio" value="" /></label>
								<p>单选按钮</p>
							</li>
						</ul>
					</div> 
				<!--</form>-->
			</div>
			<div class="st-item">
				<p class="st-item-title">表单多选</p>
				<form>
					<div class="st-form-list">
						<ul class="st-list st-border-tb">
							<li class="st-border-b">
								<label class="st-checkbox iconfont" for="radio">
									<input class="iconfont" type="checkbox" name="" value="" checked="checked"/>
								</label>
								<p>单选按钮</p>
							</li>
							<li class="st-border-b">
								<label class="st-checkbox">
									<input class="iconfont" type="checkbox" name="" value=""/>
								</label>
								<p>单选按钮</p>
							</li>
							<li class="st-border-b">
								<label class="st-checkbox">
									<input class="iconfont" type="checkbox" name="" value=""/>
								</label>
								<p>单选按钮</p>
							</li>
						</ul>
					</div>
				</form>
			</div>
			<div class="st-item">
				<p class="st-item-title">表单开关</p>
				<form>
					<div class="st-form-list">
						<ul class="st-list st-border-tb">
							<li class="st-border-b">
								<label class="st-switch">
		                            <input type="checkbox" onclick="checkboxOnclick(this)">
		                        </label>
								<p>开关按钮</p>
							</li>
							<li class="st-border-b">
								<label class="st-checkbox">
									<input class="iconfont" type="checkbox" name="" value=""/>
								</label>
								<p>单选按钮</p>
							</li>
							<li class="st-border-b">
								<label class="st-checkbox">
									<input class="iconfont" type="checkbox" name="" value=""/>
								</label>
								<p>单选按钮</p>
							</li>
						</ul>
					</div>
				</form>
			</div>

		</div>
		<script type="text/javascript">
			form()

			function checkboxOnclick(checkbox) {

				if(checkbox.checked == true) {
//					alert(1)
					//Action for checked

				} else {
//					alert(2)
					//Action for not checked

				}

			}
		</script>
	</body>

</html>